<template>
    <div class="index">
        <div class="toparea">
            <div class="status_row">
                <div class="status_description">
                    <img src="../assets/green.png" class="status1">
                    <p class="description">生产</p>
                </div>
                <div class="status_description">
                    <img src="../assets/yellow.png" class="status2">
                    <p class="description">待机</p>
                </div>
                <div class="status_description">
                    <img src="../assets/red.png" class="status3">
                    <p class="description">停机</p>
                </div>
            </div>
            <div class="currenttime">{{ currentTime }}</div>
        </div>
        <div class="mainarea">
            <div class="titlelist">
                <div class="titlelist1">
                    <div class="title title1">物流</div>
                    <img src="../assets/花括号.png" class="kuohao">
                </div>
                <div class="titlelist2">
                    <div class="title title2">设备</div>
                    <img src="../assets/花括号.png" class="kuohao">
                </div>
            </div>
            <div class="bakelist">
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakeunload.status) }">下料机械手</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeunload.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeunload.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeunload.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakedispatch.status) }">调度机器人</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakedispatch.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakedispatch.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakedispatch.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakeload.status) }">上料机械手</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeload.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeload.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeload.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="processname" :style="{ color: getColor(bake.status) }">烘烤</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bake.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bake.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bake.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakeline1.status) }">烘烤1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline1.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline1.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakeline2.status) }">烘烤2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline2.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline2.isshutdown" v-if="isFlashing">
                </div>
                <div class="bake" @click="$router.push('/monitor/bake')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(bakeline3.status) }">烘烤3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline3.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline3.isshutdown" v-if="isFlashing">
                </div>
            </div>
            <div class="weldinglist">
                <div class="welding" @click="$router.push('/monitor/welding')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="processname" :style="{ color: getColor(welding.status) }">封口焊</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="welding.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="welding.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="welding.isshutdown" v-if="isFlashing">
                </div>
                <div class="welding" @click="$router.push('/monitor/welding')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(weldingline1.status) }">封口焊1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline1.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline1.isshutdown" v-if="isFlashing">
                </div>
                <div class="welding" @click="$router.push('/monitor/welding')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(weldingline2.status) }">封口焊2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline2.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline2.isshutdown" v-if="isFlashing">
                </div>
                <div class="welding" @click="$router.push('/monitor/welding')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(weldingline3.status) }">封口焊3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline3.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline3.isshutdown" v-if="isFlashing">
                </div>
            </div>
            <div class="detectionlist">
                <div class="detection" @click="$router.push('/monitor/detection')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="processname" :style="{ color: getColor(detection.status) }">二次氦检</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detection.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detection.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detection.isshutdown" v-if="isFlashing">
                </div>
                <div class="detection" @click="$router.push('/monitor/detection')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(detectionline1.status) }">二次氦检1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline1.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline1.isshutdown" v-if="isFlashing">
                </div>
                <div class="detection" @click="$router.push('/monitor/detection')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(detectionline2.status) }">二次氦检2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline2.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline2.isshutdown" v-if="isFlashing">
                </div>
                <div class="detection" @click="$router.push('/monitor/detection')"
                @mouseenter="hover = true"
                @mouseleave="hover = false"
                :style="{ 'cursor': hover ? 'pointer' : 'default' }">
                    <p class="eqpname" :style="{ color: getColor(detectionline3.status) }">二次氦检3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline3.isstandby" v-if="isFlashing">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline3.isshutdown" v-if="isFlashing">
                </div>
            </div>
            <!-- <div class="bakelist">
                <div class="bake" :style="{ backgroundColor: getColor(bakeunload.status) }">
                    <p class="eqpname">下料机械手</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeunload.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeunload.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeunload.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bakedispatch.status) }">
                    <p class="eqpname">调度机器人</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakedispatch.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakedispatch.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakedispatch.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bakeload.status) }">
                    <p class="eqpname">上料机械手</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeload.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeload.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeload.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bake.status) }">
                    <p class="processname">烘烤</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bake.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bake.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bake.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bakeline1.status) }">
                    <p class="eqpname">烘烤1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline1.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline1.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bakeline2.status) }">
                    <p class="eqpname">烘烤2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline2.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline2.isshutdown">
                </div>
                <div class="bake" :style="{ backgroundColor: getColor(bakeline3.status) }">
                    <p class="eqpname">烘烤3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="bakeline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="bakeline3.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="bakeline3.isshutdown">
                </div>
            </div>
            <div class="weldinglist">
                <div class="welding" :style="{ backgroundColor: getColor(welding.status) }">
                    <p class="processname">封口焊</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="welding.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="welding.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="welding.isshutdown">
                </div>
                <div class="welding" :style="{ backgroundColor: getColor(weldingline1.status) }">
                    <p class="eqpname">封口焊1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline1.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline1.isshutdown">
                </div>
                <div class="welding" :style="{ backgroundColor: getColor(weldingline2.status) }">
                    <p class="eqpname">封口焊2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline2.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline2.isshutdown">
                </div>
                <div class="welding" :style="{ backgroundColor: getColor(weldingline3.status) }">
                    <p class="eqpname">封口焊3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="weldingline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="weldingline3.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="weldingline3.isshutdown">
                </div>
            </div>
            <div class="detectionlist">
                <div class="detection" :style="{ backgroundColor: getColor(detection.status) }">
                    <p class="processname">二次氦检</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detection.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detection.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detection.isshutdown">
                </div>
                <div class="detection" :style="{ backgroundColor: getColor(detectionline1.status) }">
                    <p class="eqpname">二次氦检1线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline1.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline1.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline1.isshutdown">
                </div>
                <div class="detection" :style="{ backgroundColor: getColor(detectionline2.status) }">
                    <p class="eqpname">二次氦检2线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline2.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline2.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline2.isshutdown">
                </div>
                <div class="detection" :style="{ backgroundColor: getColor(detectionline3.status) }">
                    <p class="eqpname">二次氦检3线</p>
                    <img src="../assets/green.png" class="eqpstatus1" v-show="detectionline3.isrun">
                    <img src="../assets/yellow.png" class="eqpstatus2" v-show="detectionline3.isstandby">
                    <img src="../assets/red.png" class="eqpstatus3" v-show="detectionline3.isshutdown">
                </div>
            </div> -->
        </div>
    </div>
</template>
<style scoped>
.index{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(../assets/backimg.jpeg) no-repeat center center;
    background-size: cover;
    background-position: center;
    z-index: -1;
}
.toparea{
    width: 100%;
    height: 3.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: white;
}
.currenttime{
    font-size: 1.5rem;
    position: relative;
    left: 34.375rem;
}
.status_row{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
}
.status_description{
    width: 5.625rem;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.status1{
    width: 1.875rem;
    height: 1.875rem;
    margin-top: .1875rem;
}
.status2{
    width: 2.1875rem;
    height: 2.1875rem;
    margin-top: .1875rem;
}
.status3{
    width: 2.625rem;
    height: 2.625rem;
    margin-top: .1875rem;
}
.eqpstatus1, .eqpstatus2, .eqpstatus3{
    margin-top: 1.5625rem;
}
.eqpstatus1{
    width: 1.3125rem;
    height: 1.3125rem;
}
.eqpstatus2{
    width: 1.4375rem;
    height: 1.4375rem;
}
.eqpstatus3{
    width: 1.6875rem;
    height: 1.6875rem;
}
.description{
    font-size: 1.5rem;
    vertical-align: center;
}
.mainarea{
    width: 80%;
    height: 41.25rem;
    display: flex;
    justify-content: space-around;
}
.titlelist{
    width: 18.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-right: -16.25rem;
}
.titlelist1, .titlelist2{
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
}
.titlelist1{
    padding-bottom: 2.8125rem;
}
.titlelist2{
    padding-top: 3.125rem;
}
.kuohao{
    width: 12.5rem;
    height: 88%;
}
.title{
    width: 6.25rem;
    height: 3.75rem;
    background: silver;
    /* background: #00ff4c; */
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .3125rem;
    margin-right: -3.125rem;
}
.bakelist{
    width: 7.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.bake, .welding, .detection{
    width: 6.25rem;
    height: 3.75rem;
    background: silver;
    /* font-size: 1.5rem; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: .3125rem;
    position: relative;
}
.weldinglist, .detectionlist{
    width: 7.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items: center;
    padding-bottom: 1.125rem;
}
.welding, .detection{
    margin-top: 2.125rem;
}
.eqpname, .processname{
    font-weight: 600;
    position: absolute;
    margin-bottom: 1.5625rem;
}
.processname{
    font-size: 1.25rem;
}
</style>
<script>
export default{
    mounted(){
        this.bakeunload.status='shutdown'
        this.bakedispatch.status='run'
        this.bakeload.status='standby'
        this.bakeline1.status='run'
        this.bakeline2.status='run'
        this.bakeline3.status='run'
        this.weldingline1.status='run'
        this.weldingline2.status='run'
        this.weldingline3.status='run'
        this.detectionline1.status='run'
        this.detectionline2.status='standby'
        this.detectionline3.status='run'
        this.startFlashing();
    },
    data(){
        return{
            isFlashing:undefined,
            hover:false,
            currentTime: this.getCurrentDateTime(),
            bakeunload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakedispatch:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeload:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bakeline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            bake:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            weldingline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            welding:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline1:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline2:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detectionline3:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
            detection:{
                status:'',
                isrun:undefined,
                isstandby:undefined,
                isshutdown:undefined
            },
        }
    },
    watch:{
        'bakeunload.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakeunload.status){
                case 'run':
                    this.bakeunload.isrun=true
                    this.bakeunload.isstandby=false
                    this.bakeunload.isshutdown=false
                    break;
                case 'standby':
                    this.bakeunload.isrun=false
                    this.bakeunload.isstandby=true
                    this.bakeunload.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakeunload.isrun=false
                    this.bakeunload.isstandby=false
                    this.bakeunload.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'bakedispatch.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakedispatch.status){
                case 'run':
                    this.bakedispatch.isrun=true
                    this.bakedispatch.isstandby=false
                    this.bakedispatch.isshutdown=false
                    break;
                case 'standby':
                    this.bakedispatch.isrun=false
                    this.bakedispatch.isstandby=true
                    this.bakedispatch.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakedispatch.isrun=false
                    this.bakedispatch.isstandby=false
                    this.bakedispatch.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'bakeload.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakeload.status){
                case 'run':
                    this.bakeload.isrun=true
                    this.bakeload.isstandby=false
                    this.bakeload.isshutdown=false
                    break;
                case 'standby':
                    this.bakeload.isrun=false
                    this.bakeload.isstandby=true
                    this.bakeload.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakeload.isrun=false
                    this.bakeload.isstandby=false
                    this.bakeload.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'bakeline1.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakeline1.status){
                case 'run':
                    this.bakeline1.isrun=true
                    this.bakeline1.isstandby=false
                    this.bakeline1.isshutdown=false
                    break;
                case 'standby':
                    this.bakeline1.isrun=false
                    this.bakeline1.isstandby=true
                    this.bakeline1.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakeline1.isrun=false
                    this.bakeline1.isstandby=false
                    this.bakeline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'bakeline2.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakeline2.status){
                case 'run':
                    this.bakeline2.isrun=true
                    this.bakeline2.isstandby=false
                    this.bakeline2.isshutdown=false
                    break;
                case 'standby':
                    this.bakeline2.isrun=false
                    this.bakeline2.isstandby=true
                    this.bakeline2.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakeline2.isrun=false
                    this.bakeline2.isstandby=false
                    this.bakeline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'bakeline3.status': function(newVal, oldVal){
            this.bakestatuschange()
            switch(this.bakeline3.status){
                case 'run':
                    this.bakeline3.isrun=true
                    this.bakeline3.isstandby=false
                    this.bakeline3.isshutdown=false
                    break;
                case 'standby':
                    this.bakeline3.isrun=false
                    this.bakeline3.isstandby=true
                    this.bakeline3.isshutdown=false
                    break;
                case 'shutdown':
                    this.bakeline3.isrun=false
                    this.bakeline3.isstandby=false
                    this.bakeline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'weldingline1.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline1.status){
                case 'run':
                    this.weldingline1.isrun=true
                    this.weldingline1.isstandby=false
                    this.weldingline1.isshutdown=false
                    break;
                case 'standby':
                    this.weldingline1.isrun=false
                    this.weldingline1.isstandby=true
                    this.weldingline1.isshutdown=false
                    break;
                case 'shutdown':
                    this.weldingline1.isrun=false
                    this.weldingline1.isstandby=false
                    this.weldingline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'weldingline2.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline2.status){
                case 'run':
                    this.weldingline2.isrun=true
                    this.weldingline2.isstandby=false
                    this.weldingline2.isshutdown=false
                    break;
                case 'standby':
                    this.weldingline2.isrun=false
                    this.weldingline2.isstandby=true
                    this.weldingline2.isshutdown=false
                    break;
                case 'shutdown':
                    this.weldingline2.isrun=false
                    this.weldingline2.isstandby=false
                    this.weldingline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'weldingline3.status': function(newVal, oldVal){
            this.weldingstatuschange()
            switch(this.weldingline3.status){
                case 'run':
                    this.weldingline3.isrun=true
                    this.weldingline3.isstandby=false
                    this.weldingline3.isshutdown=false
                    break;
                case 'standby':
                    this.weldingline3.isrun=false
                    this.weldingline3.isstandby=true
                    this.weldingline3.isshutdown=false
                    break;
                case 'shutdown':
                    this.weldingline3.isrun=false
                    this.weldingline3.isstandby=false
                    this.weldingline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline1.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline1.status){
                case 'run':
                    this.detectionline1.isrun=true
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=false
                    break;
                case 'standby':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=true
                    this.detectionline1.isshutdown=false
                    break;
                case 'shutdown':
                    this.detectionline1.isrun=false
                    this.detectionline1.isstandby=false
                    this.detectionline1.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline2.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline2.status){
                case 'run':
                    this.detectionline2.isrun=true
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=false
                    break;
                case 'standby':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=true
                    this.detectionline2.isshutdown=false
                    break;
                case 'shutdown':
                    this.detectionline2.isrun=false
                    this.detectionline2.isstandby=false
                    this.detectionline2.isshutdown=true
                    break;
                default:
                    break;
            }
        },
        'detectionline3.status': function(newVal, oldVal){
            this.detectionstatuschange()
            switch(this.detectionline3.status){
                case 'run':
                    this.detectionline3.isrun=true
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=false
                    break;
                case 'standby':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=true
                    this.detectionline3.isshutdown=false
                    break;
                case 'shutdown':
                    this.detectionline3.isrun=false
                    this.detectionline3.isstandby=false
                    this.detectionline3.isshutdown=true
                    break;
                default:
                    break;
            }
        },
    },
    methods:{
        startFlashing() {
            this.isFlashing = true;
            this.intervalId = setInterval(() => {
                this.isFlashing = !this.isFlashing;
                this.currentTime = this.getCurrentDateTime();
            }, 1000); // 每秒切换一次
        },
        getCurrentDateTime(){
            const now = new Date();
            return `${now.getFullYear()}-${this.padNumber(now.getMonth() + 1)}-${this.padNumber(now.getDate())}
            ${this.padNumber(now.getHours())}:${this.padNumber(now.getMinutes())}:${this.padNumber(now.getSeconds())}`;
        },
        padNumber(num) {
            return num < 10 ? '0' + num : num;
        },
        getColor(value){
            if(value=='shutdown'){
                return 'red'
            }
            else if(value=='standby'){
                return 'yellow'
            }
            else{
                return ''
            }
        },
        bakestatuschange(){
            if(this.bakeunload.status=='run' && this.bakedispatch.status=='run' && this.bakeload.status=='run' 
            && this.bakeline1.status=='run' && this.bakeline2.status=='run' && this.bakeline3.status=='run'){
                this.bake.status='run'
                this.bake.isrun=true
                this.bake.isstandby=false
                this.bake.isshutdown=false
            }
            else{
                if(this.bakeunload.status=='shutdown' || this.bakedispatch.status=='shutdown' || this.bakeload.status=='shutdown' 
                || this.bakeline1.status=='shutdown' || this.bakeline2.status=='shutdown' || this.bakeline3.status=='shutdown'){
                    this.bake.status='shutdown'
                    this.bake.isrun=false
                    this.bake.isstandby=false
                    this.bake.isshutdown=true
                }
                else{
                    this.bake.status='standby'
                    this.bake.isrun=false
                    this.bake.isstandby=true
                    this.bake.isshutdown=false
                }       
            }
        },
        weldingstatuschange(){
            if(this.weldingline1.status=='run' && this.weldingline2.status=='run' && this.weldingline3.status=='run'){
                this.welding.status='run'
                this.welding.isrun=true
                this.welding.isstandby=false
                this.welding.isshutdown=false
            }
            else{
                if(this.weldingline1.status=='shutdown' || this.weldingline2.status=='shutdown' || this.weldingline3.status=='shutdown'){
                    this.welding.status='shutdown'
                    this.welding.isrun=false
                    this.welding.isstandby=false
                    this.welding.isshutdown=true
                }
                else{
                    this.welding.status='standby'
                    this.welding.isrun=false
                    this.welding.isstandby=true
                    this.welding.isshutdown=false
                }       
            }
        },
        detectionstatuschange(){
            if(this.detectionline1.status=='run' && this.detectionline2.status=='run' && this.detectionline3.status=='run'){
                this.detection.status='run'
                this.detection.isrun=true
                this.detection.isstandby=false
                this.detection.isshutdown=false
            }
            else{
                if(this.detectionline1.status=='shutdown' || this.detectionline2.status=='shutdown' || this.detectionline3.status=='shutdown'){
                    this.detection.status='shutdown'
                    this.detection.isrun=false
                    this.detection.isstandby=false
                    this.detection.isshutdown=true
                }
                else{
                    this.detection.status='standby'
                    this.detection.isrun=false
                    this.detection.isstandby=true
                    this.detection.isshutdown=false
                }       
            }
        }
    }
}
</script>